<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>用户管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" th:href="@{/front/js/layui/css/layui.css}" type="text/css">
</head>
<body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-warm" lay-event="add" >添加</button>
        <button class="layui-btn layui-btn-danger" lay-event="delAll">删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<table id="demo" lay-filter="demo"></table>
<script th:src="@{/front/js/layui/layui.js}"></script>
<script th:inline="javascript" type="text/javascript">
    layui.use(['table','upload','jquery'], function(){
        let table = layui.table;
        let upload = layui.upload;
        let $ = layui.jquery;
        let cxtPath = /*[[@{/}]]*/'';
        //执行渲染
        table.render({
                elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
                url: cxtPath+'user/page',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['exports', 'print'],
                page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 3 //只显示 1 个连续页码
                    , first: '首页' //显示首页
                    , last: '尾页' //显示尾页
                },
                cols: [ [
                    {type: 'checkbox'},
                    {field: 'uid', title: 'ID',hide:true, fixed: 'left'},
                    {field: 'username', title: '用户名'},
                    {field: 'upassword', title: '密码'},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ] ]
            });

        //头工具栏事件
        table.on('toolbar(demo)', function(obj){
            switch(obj.event){
                case 'delAll':
                    let checkStatus = table.checkStatus('demo');
                    if (checkStatus.data.length==0) {
                        layer.msg('至少选择一条数据', {icon: 2});
                        return;
                    }
                    let ids = [];
                    for (let i in checkStatus.data){
                        ids.push(checkStatus.data[i].uid);
                    }
                    layer.confirm('真的删除行么', {icon:3}, function(index){
                        $.ajax({
                            url: `${cxtPath}user/delList`
                            , contentType: 'application/json'
                            , type: 'post'
                            , data: JSON.stringify(ids)
                            , success: function () {
                                layer.msg('删除成功', {icon: 1});
                                //重新加载数据
                                table.reload("demo", {
                                    page: {
                                        curr: 1
                                    }
                                });
                            }
                        })
                    });
                    break;
                case 'add':
                    layer.open({
                        type: 2,
                        title: '添加',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['893px', '600px'],
                        content: cxtPath+'user/add'
                    });
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(demo)', function(obj){
            let data = obj.data;
            //删除单行
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', {icon:3}, function(index){
                    $.post(cxtPath+'user/del?uid=' + data.uid, function() {
                        table.reload("demo", {
                            page: {curr: 1}
                        });
                        layer.close(index);
                    })
                });
                //修改单行
            } else if(obj.event === 'edit'){
                let param = $.param(data);
                console.log(param);
                layer.open({
                    type: 2,
                    title: '编辑',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1000px', '600px'],
                    content: cxtPath+'user/upp?' + param
                });
            }
        });
    })
</script>
</body>
</html>
